import React, { Component } from 'react';
export default class Inside extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        }
        this.add = this.props.inSiderAdd.bind(this);
        this.subtraction = this.props.inSiderSubtraction.bind(this);
        this.handleChange = this.props.handleChange.bind(this)
    }

    componentWillUpdate(newDate, oldDate) {
        console.groupCollapsed('更新数据');
        console.log('接收的新数据', newDate);
        console.log('原来的老数据', oldDate);
        console.groupEnd()
    }

    inSiderAdd() {
        let count = this.state.count + 1;
        this.setState({
            count: count
        });
        this.add();
    }

    inSiderSubtraction() {
        let count = this.state.count - 1;
        this.setState({
            count: count
        });
        this.subtraction();
    }


    // 手动输入
    handleInput(e) {
        this.handleChange(e)
    }
    render() {
        return (
            <div>
                <p>Inside</p>
                <label htmlFor="middleInput">inside中的input</label>
                <button onClick={() => this.inSiderAdd()}>加</button>
                <input id="middleInput" onChange={(e) => this.handleInput(e)} type="number" value={this.props.count} />
                <button onClick={() => this.inSiderSubtraction()}>减</button>
            </div>
        )
    }

}